<template>
  <!--视图-->
  <div>

        <div id="main1" style="width: 600px;height:400px;"></div>
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="main2" style="width: 600px;height:400px;"></div>

  </div>
</template>

<script>


export default {
  name: "DapingView",
  data() {//属性
    return {}
  }, methods: {//自定义方法
    getlist1()
    {
      var echarts = require('echarts');

      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      let $this=this;
      window.setTimeout(function (){

        $this.axios.post("/service/getbaobiao").then(res=>{

          const xzhouData = [];
          const yzhouData = [];
          res.data.data.forEach(item => {
            xzhouData.push(item.xzhou);
            yzhouData.push(item.yzhou);
          });
          option = {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: xzhouData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: yzhouData,
                type: 'line',
                areaStyle: {}
              }
            ]
          };

          option && myChart.setOption(option);
      })
      },3000)
    },
    getlist()
    {
      var echarts = require('echarts');

      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;

      let $this=this;

      window.setTimeout(function (){

        $this.axios.post("/service/getbaobiao").then(res=>{



          const xzhouData = [];
          res.data.data.forEach(item => {
            xzhouData.push({value: item.yzhou, name: item.xzhou});
          });



          option = {
            title: {
              text: 'Referer of a Website',
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: xzhouData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          option && myChart.setOption(option);
        })




      },3000)
    },
    getlist2(){
      let $this=this;
      var echarts = require('echarts');

      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      window.setTimeout(function (){
        $this.axios.post("/service/process/getbaobiao").then(res=>{
          const xzhouData=[];
          res.data.data.forEach(item=>{
            xzhouData.push({value:item.yzhou,name:item.xzhou});
          });

          option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'vertical',
              left: 'right'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: xzhouData,
                emphasis: {
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                },
              }
            ]
          };

          option && myChart.setOption(option);
        })
      },3000)
    }

  }, created() { //钩子函数

  },
  mounted() {
    this.getlist();
    this.getlist1();
    this.getlist2();
  }
}
</script>

<style scoped>
#main,
#main2,
#main1 {
  float: left;
}


</style>